<!-- 物料清单 -->
<template>
  <div class="billOfMaterials">
    <!-- <div class="billOfMaterials-header">
      <div class="billOfMaterials-header-btn">
        <el-button size="mini">导出</el-button>
      </div>
      <div class="billOfMaterials-header-info">
        <div class="billOfMaterials-header-info-item">
          <span>BOM编号：</span>
          <span>{{ total }}</span>
        </div>
        <div class="billOfMaterials-header-info-item">
          <span>BOM版本：</span>
          <span>{{ totalAmountReceived }}</span>
        </div>
        <div class="billOfMaterials-header-info-item">
          <span>退料总量：</span>
          <span>{{ totalAmountOfReturnedMaterials }}</span>
        </div>
      </div>
    </div> -->
    <div class="billOfMaterials-main">
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="bomItemId"
        size="small"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column type="index" label="序号" width="50" align="center"/>
        <el-table-column prop="bomItemName" label="产品名称" />
        <el-table-column prop="bomItemCode" label="产品编号" align="center" />
        <el-table-column prop="bomItemSpec" label="规格型号"  align="center"/>
        <el-table-column prop="unitOfMeasure" label="单位" align="center"/>
        <!-- <el-table-column prop="bomItemCode" label="BOM编号" align="center"/>
        <el-table-column prop="address" label="BOM版本"  align="center"/>
        <el-table-column prop="date" label="使用量" align="center"/> -->
        <el-table-column prop="quantity" label="使用比例" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.quantity*100 }}%</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BillOfMaterials',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: [],
      total: 0,
      totalAmountReceived: 0,
      totalAmountOfReturnedMaterials: 0,
    }
  },
  watch: {
    data: {
      handler(val) {
        this.tableData = this.buildTree(val)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    buildTree(data) {
      const idMap = new Map(); // 用于存储所有节点
      const tree = []; // 最终的树形结构

      // 初始化所有节点，并将它们放入映射中
      data.forEach(item => {
        idMap.set(item.bomItemId, { ...item, children: [] });
      });

      // 遍历数据，构造父子关系
      data.forEach(item => {
        const node = idMap.get(item.bomItemId); // 当前节点
        if (idMap.has(item.itemId)) {
          // 如果找到父节点，添加到父节点的 children 中
          idMap.get(item.itemId).children.push(node);
        } else {
          // 如果没有父节点，说明是根节点
          tree.push(node);
        }
      });

      return tree;
    }

  }
}
</script>

<style lang="scss" scoped>
.billOfMaterials {
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    // padding: 0 20px;
    &-btn {
      display: flex;
    }
    &-info {
      display: flex;
      justify-content: space-between;
      &-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        span {
          font-size: 12px;
        }
      }
    }
  }
}
</style>